
/*模拟骨架屏加载*/
function skeleton(time){
        setTimeout(function(){
    // $(".skeleton").removeClass("skeleton"); 
    $(".container .skeleton").each(function(index,item){
        setTimeout(function(){
            $(item).removeClass("skeleton");
        },time)
        $(".container .skt-loading").removeClass("skt-loading")
        $(".mask").removeClass("mask");
    })
    },time) 
}
function getState(){
    if(window.location.href.split("?")[1]){
    let C1=window.location.href.split("?")[1]; //得到id=12312312
     let C2=C1.split("=")[1]; //得到id
        if(C2){
            skeleton(300);
        }
    }
 }
skeleton(500);
 getState();

let values =1;
let flat = true;
window.onscroll = function(e){
    if(isCanLoad(document.documentElement.scrollTop||document.body.scrollTop)){
        setTimeout(function(){
            if(flat){
                rendering();
            }
            flat= false;
        },500);
    ;
    }
}

/*定义一个加载渲染的方法*/
function rendering(){
    $.ajax({
        url:"https://www.fastmock.site/mock/0a7377ad1598acf1f7e8229f1793af9f/iTrip-G3/detailed",
        success:function(d){
            if(d.code==200){
                console.log("成功");
            $(".ske").remove();
             let data=d.data[0].goo;
             let strHTML = "";
             for(let i =values;i>=0;i--){
                if(i==values-2)break;
                if(values-2<i){
                    strHTML+='<li data-id='+data[i].goodsId+'><a href="travelDatail.html?id='+data[i].goodsId+'&address=index.html"><div class="index-sale-img"><img src="'+data[i].goodsImg+'" alt=""></div><p class="index-sale-title">'+data[i].goodsTitle+'</p><div class="index-sale-state"><span>席位充足</span><div class="index-sale-price"><span>'+data[i].price+'</span>起</div></div></a></li>';
                }
            }
            values = values>=11?1:values+2;
            $(".index-sale-hui ul").append(strHTML);
            setTimeout(function(){
                flat= true;
            },300)
            $(".index-sale-hui ul").append("<li class='ske'><a href='javascript:'><div class='index-sale-img skeleton'></div><p class='index-sale-title skeleton'>巴厘岛7日5晚自由行。五星豪庭，三星价格3月特...</p><div class='index-sale-state skeleton'> <span>席位充足</span></div></a></li><li class='ske'><a href='javascript:'><div class='index-sale-img skeleton'></div><p class='index-sale-title skeleton'>巴厘岛7日5晚自由行。五星豪庭，三星价格3月特...</p><div class='index-sale-state skeleton'> <span>席位充足</span></div></a></li>");
            }
        },
        error:function(){
            setTimeout(function(){
                rendering()
            },3000)
        }
    })

}

let winH = window.innerHeight;
 //定义一个方法用于检测是否可以加载更多数据
 function isCanLoad(scrollH){
    var lastItem =  $(".index-sale-hui ul li").last();//获取最后一条记录
    if(lastItem[0]){
        var lastTop = lastItem.offset().top;//获取最后一条记录的距离文档顶部的距离
        var lastH = lastItem.height();//获取最后一条记录的高度   
        //判断什么时候可以加载更多
        if((scrollH + winH) >= (lastTop + lastH)-200){
            // console.log('可以加载更多数据了...');
            return true;
        }else{
            return false;
        }
    }
    return false;
 }

